import { connect } from 'umi';
import Header from './components/Header';
import styles from './index.less';
import Plan from './plan';
import React, { useState } from 'react';
import { PageLoading, TRDefault } from '@/components';
import { Spin } from 'antd';

const InterprovincialSpotDeclaration = ({ marketList }) => {
  const [loading, setLoading] = useState(true);
  return (
    <div className={styles.body}>
      <Header setLoading={setLoading} />
      <div className={styles.box}>
        <div className={styles.content}>
          {marketList?.length === 0 ? (
            loading ? (
              <PageLoading />
            ) : (
              <TRDefault type="lock" />
            )
          ) : (
            <Spin spinning={loading}>
              <Plan loading={loading} setLoading={setLoading} />
            </Spin>
          )}
        </div>
      </div>
    </div>
  );
};

export default connect(({ interprovincialSpotDeclaration }) => ({
  loadingNum: interprovincialSpotDeclaration.loadingNum,
  marketList: interprovincialSpotDeclaration.marketList,
  sitelist: interprovincialSpotDeclaration.sitelist,
}))(InterprovincialSpotDeclaration);
